import React, { useEffect, useState } from 'react'

import { Input, Col, Row, Button, Radio, Space} from 'antd';
import request, { baseUrl } from '../../utils/request'
import Conponent from './Conponent'
import { useNavigate } from 'react-router-dom'
import { CaretRightOutlined, } from '@ant-design/icons'

const { Search } = Input;

function List() {
    const nvaigate = useNavigate()
    // 发送ajax请求，获取数据
    const [tabPosition, setTabPosition] = useState('left');
    const changeTabPosition = (e) => {
        setTabPosition(e.target.value);
    };
    const [newlist, setNewlist] = useState([])
    const [size, setSize] = useState('large');
    useEffect(() => {
        request.get('/list/show/category/动作', {
            params: {
                size: 12,
            }
        }).then(({
            data
        }) => {
            setNewlist(data.movielist.data)
        })

    }, [])
    const videoClassArr = ['动作','喜剧', '爱情', '科幻', '悬疑', '恐怖', '剧情', '动画', '冒险', '纪录', '剧集', '演唱会']
    return <>
        {/* <h2 className='abcd'>动作
            <span className='sss'> 动作.周榜</span>
            <span className='ss'>
                <Button  shape="round" size={size} >
                    更多动作》
                </Button>
            </span>
        </h2> */}


        <Row>
            <Col span={6} push={18}>

                {/* 动作模块的右边 */}

                {/* <h1>动作.周榜</h1> */}
                {/* <Row>{
                    newlist.map((item, idx) => {
                        return (
                            <Col span={24} key={item.movieID}>
                                <Radio.Group value={tabPosition} onChange={changeTabPosition}>
                                    <Radio.Button value="right" >
                                        <Space>

                                            <div >
                                                <CaretRightOutlined className={'sanjiao' + idx}
                                                    style={{ fontSize: '95px', marginLeft: '-81px', marginTop: '-15px' }}>
                                                </CaretRightOutlined>

                                                <span className='aab'>{idx + 1}</span>
                                            </div>

                                            <div className='ab'>{item.title}</div>

                                        </Space>
                                    </Radio.Button>
                                </Radio.Group>


                            </Col>
                        )
                    })
                }

                </Row> */}

            </Col>

            {/* 动作模块的左边 */}
            {/* <Col span={18} pull={6}>
                <Row justify="space-evenly">{
                    newlist.map(item => {
                        return <Col span={6} key={item.movieID}>
                            <div className='divspan'>
                                <span className='divspanK' >{item.douban}</span>
                                <span className='divspanK' >{item.videoClass}</span>
                                <span className='divspanK' >{item.startTime}</span>
                            </div>
                            <img onClick={() => {
                                nvaigate(`/detail/${item.movieID}`)
                            }} src={baseUrl + '/imgs/' + item.imgNames} width="80%" height={'300px'} className='qqq'/>
                            <div className='abc'>{item.title}</div></Col>
                    })
                }
                </Row>
            </Col> */}
        </Row>




        {
            videoClassArr.map((item, idx) => {
                return <div key={idx}>
                    <Row>
                        <Col>
                            <Conponent tag={{ class: item }}></Conponent>
                        </Col>
                        <Col>

                        </Col>

                    </Row>
                </div>
            })
        }


    </>

}





export default List;